<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>社交广场</title><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>热门推荐</title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<link rel="stylesheet" href="./css/swiper.min.css">
		<link rel="stylesheet" href="./css/relation.css" />
		<style>
/** 分类及焦点图 **/
.column .xtx_entry {
  height: 500px;
  background-color: #f2f2f2;
  position: relative;
}

.column .xtx_category {
  width: 250px;
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  z-index: 9;
}


.column .xtx_category_super li {
  height: 50px;
  padding: 0 20px 0 40px;
  /* transition: background-color 0.25s; */
  cursor: pointer;
}

.column .xtx_category_super li:hover,
.column .xtx_category_super li.active {
  background-color: #27BA9B;
}

.column .xtx_category_super a {
  color: #fff;
  font-size: 16px;
  line-height: 50px;
}

.column .xtx_category_super a small {
  font-size: 14px;
}
.column .xtx_banner {
  width: 100%;
  height: 500px;
}
.column .xtx_banner img{
  widows: 98px;
  height: 500px;	
}
.column .xtx_banner .item{
	display: none;
}
.column .xtx_banner .active {
  display: block;
}

</style>
	</head>
	<body>
		<div class="xtx_topnav">
		  <div class="wrapper">
		    <!-- 顶部导航 -->
		    <ul class="xtx_navs">
		      <li>
		        <a href="./login.html">请先登录</a>
		      </li>
		      <li>
		        <a href="./register.html">免费注册</a>
		      </li>
		      <li>
		        <a href="javascript:;">我的订单</a>
		      </li>
		      <li>
		        <a href="javascript:;">会员中心</a>
		      </li>
		      <li>
		        <a href="javascript:;">帮助中心</a>
		      </li>
		      <li>
		        <a href="javascript:;">在线客服</a>
		      </li>
		      <li>
		        <a href="javascript:;">
		          <i class="mobile sprites"></i>
		          手机版
		        </a>
		      </li>
		    </ul>
		  </div>
		</div>
		<script>
			//首页渲染登录的用户名和退出登陆
			const li1 = document.querySelector('.xtx_navs li:first-child')
			const li2 = li1.nextElementSibling
			function render() {
				const uname = sessionStorage.getItem('xtx-uname')
				if (uname) {
					li1.innerHTML = `
							<a href='#'>
								<img src="./img/iconfont/daibiao.png" style="width:13px";height:'13px'/>&nbsp;
									${uname}
							</a>`
					li2.innerHTML = `<a href='#'>退出登陆</i></a>`
				} else {
					li1.innerHTML = `<a href='./login.html'>请先登录</a>`
					li2.innerHTML = `<a href='./register.html'>免费注册</a>`
				}
			}
			render()
			//退出登陆
			li2.addEventListener('click', function () {
				sessionStorage.removeItem('xtx-uname')
				render()
			})
		</script>
		<!-- 头部 -->
		<div class="xtx_header">
		  <div class="wrapper">
		    <!-- 网站Logo -->
		    <h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
		    <!-- 主导航 -->
		    <div class="xtx_navs">
		      <ul class="clearfix">
		        <li>
		          <a href="./index.html">首页</a>
		        </li>
		        <li>
		          <a href="recommend.html">热门推荐</a>
		        </li>
		        <li>
		          <a href="delicacy.html">当地美食</a>
		        </li>
		        <li>
		          <a href="travel.html">极速出行</a>
		        </li>
		        <li>
		          <a href="relation.html">社区广场</a>
		        </li>
		      <li>
		      	 <a href="youxue.html">我的游学</a>
		      	</li>
		      </ul>
		    </div>
		    <!-- 站内搜索 -->
		    <div class="xtx_search clearfix">
		      <!-- 购物车 -->
		      <a href="#" class="xtx_search_cart sprites">
		        <i>2</i>
		      </a>
		      <!-- 搜索框 -->
		      <div class="xtx_search_wrapper">
		        <input type="text" placeholder="搜一搜">
		      </div>
			  
		    </div>
			<div style="margin-left: 15px;">
				<i style="font-size: 24px;" class="iconfont icon-setting"></i>
			</div>
		  </div>
		</div>
		
		
        
		
		<div class="sqgc">
			<div class="sqgc-one">
				<div style="background-color: white;padding: 20px;">
					<h1 style="font-size: 24px;color: #333;">话题广场</h1>
					<div style="width: 100%;height: 30px;display: flex;flex-direction: row;justify-content: space-between;
					margin-top: 20px;margin-bottom: 20px;">
						<p style="color:#70bb83;font-weight: bold;">推荐你来参与.....</p>
						<p><a  href="javascript:;" style="color:#6a9bc2;">换一批看看</a></p>
					</div>
					<div style="display: flex;flex-direction: row;justify-content: space-between;">
						<div style="border: 1px solid #999; width: 220px;height: 150px;display: flex;justify-content: center;
						align-items: center;flex-direction: column;">
							<h2 style="margin-bottom: 0px;"><a  href="javascript:;" style="color:#6a9bc2 ;font-size: 15px;">东北一日游</a></h2>
							<p style="margin: 10px 0;"><a href="javascript:;" style="font-size: 13px;color: #666;">新话题<a></p>
							<div style="width: 80px;height: 23px;border: 1px solid #70bb83;
							display: flex;justify-content: center;align-items: center; color: #70bb83;">
								参与话题</div>
						</div>
						<div style="border: 1px solid #999; width: 220px;height: 150px;display: flex;justify-content: center;
						align-items: center;flex-direction: column;">
							<h2 style="margin-bottom: 0px;"><a  href="javascript:;" style="color:#6a9bc2 ;font-size: 15px;">一个人如何度过假期</a></h2>
							<p style="margin: 10px 0;"><a href="javascript:;" style="font-size: 13px;color: #666;">新话题<a></p>
							<div style="width: 80px;height: 23px;border: 1px solid #70bb83;
							display: flex;justify-content: center;align-items: center; color: #70bb83;">
								参与话题</div>
						</div>
						<div style="border: 1px solid #999; width: 220px;height: 150px;display: flex;justify-content: center;
						align-items: center;flex-direction: column;">
							<h2 style="margin-bottom: 0px;"><a  href="javascript:;" style="color:#6a9bc2 ;font-size: 15px;">新疆旅游能有多美好</a></h2>
							<p style="margin: 10px 0;"><a href="javascript:;" style="font-size: 13px;color: #666;">新话题<a></p>
							<div style="width: 80px;height: 23px;border: 1px solid #70bb83;
							display: flex;justify-content: center;align-items: center; color: #70bb83;">
								参与话题</div>
						</div>
					</div>
					<div style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 20px;margin-left: -20px;">
						<div style="border: 1px solid #999; width: 220px;height: 150px;display: flex;justify-content: center;
						align-items: center;flex-direction: column;">
							<h2 style="margin-bottom: 0px;"><a  href="javascript:;" style="color:#6a9bc2 ;font-size: 15px;">旅游，没伴侣？</a></h2>
							<p style="margin: 10px 0;"><a href="javascript:;" style="font-size: 13px;color: #666;">新话题<a></p>
							<div style="width: 80px;height: 23px;border: 1px solid #70bb83;
							display: flex;justify-content: center;align-items: center; color: #70bb83;">
								参与话题</div>
						</div>
						<div style="border: 1px solid #999; width: 220px;height: 150px;display: flex;justify-content: center;
						align-items: center;flex-direction: column;">
							<h2 style="margin-bottom: 0px;"><a  href="javascript:;" style="color:#6a9bc2 ;font-size: 15px;">当代青年的生活报告</a></h2>
							<p style="margin: 10px 0;"><a href="javascript:;" style="font-size: 13px;color: #666;">新话题<a></p>
							<div style="width: 80px;height: 23px;border: 1px solid #70bb83;
							display: flex;justify-content: center;align-items: center; color: #70bb83;">
								参与话题</div>
						</div>
						<div style="border: 1px solid #999; width: 220px;height: 150px;display: flex;justify-content: center;
						align-items: center;flex-direction: column;">
							<h2 style="margin-bottom: 0px;"><a  href="javascript:;" style="color:#6a9bc2 ;font-size: 15px;">我的产假日记</a></h2>
							<p style="margin: 10px 0;"><a href="javascript:;" style="font-size: 13px;color: #666;">新话题<a></p>
							<div style="width: 80px;height: 23px;border: 1px solid #70bb83;
							display: flex;justify-content: center;align-items: center; color: #70bb83;">
								参与话题</div>
						</div>
					</div>
				</div>
				<div class="plkj">
					<div style="display: flex;flex-direction: row;padding: 20px;background: white;margin-top: 10px;">
						<div>
							<a href="javascript:;"><img src="./img/tx1.jpg" style="width: 30px;height: 30px;border-radius: 50%;" /></a>
						</div>
						<div style="margin-left: 10px;">
							<h1 style="font-size: 18px;color: #333;"><a href="javascript:;">杜老师小确丧</a></h1>
							<p style="font-size: 5px;margin: 3px 0;"><a href="javascript:;" style="color: #999;">2023-4-19</a></p>
							<h1 style="font-size: 18px;color: #333;"><a href="javascript:;">热门笔记榜 | 摄影</a></h1>
							<p style="font-size: 15px;color: #666;margin: 5px 0;"><a href="javascript:;"  class="rela" >#三亚</a>
							<a href="javascript:;"  class="rela">#旅行日志</a></p>
							<div>
								<img src="./img/sy1.jpg" style="width: 100px;height: 100px;"/>
								<img src="./img/sy2.jpg" style="width: 100px;height: 100px;"/>
								<img src="./img/sy3.jpg" style="width: 100px;height: 100px;"/>
								<img src="./img/sy4.jpg" style="width: 100px;height: 100px;"/>
							
							</div>
							<a href="javascript:;" style="font-size: 13px;color: #999;margin-top: 8px;">9个喜欢,12个评论</a>
						</div>
					</div>
					<div style="display: flex;flex-direction: row;padding: 20px;background: white;margin-top: 10px;">
						<div>
							<a href="javascript:;"><img src="./img/tx2.jpg" style="width: 30px;height: 30px;border-radius: 50%;" /></a>
						</div>
						<div style="margin-left: 10px;">
							<h1 style="font-size: 18px;color: #333;"><a href="javascript:;">魔女柒柒</a></h1>
							<p style="font-size: 5px;margin: 3px 0;"><a href="javascript:;" style="color: #999;">2023-4-27</a></p>
							<h1 style="font-size: 18px;color: #333;"><a href="javascript:;">今日份早餐记录 | 庞记老粉</a></h1>
							<p style="font-size: 15px;color: #666;margin: 5px 0;"><a href="javascript:;"  class="rela" >#早餐</a>
							<a href="javascript:;"  class="rela">#今天吃老友粉加油条，哈哈哈</a></p>
							<div>
								<img src="img/pjlf.jpg" style="width: 100px;height: 100px;"/>
								<img src="img/pjlf1.jpg" style="width: 100px;height: 100px;"/>
								<img src="img/pjlf3.jpg" style="width: 100px;height: 100px;"/>
							</div>
							<a href="javascript:;" style="font-size: 13px;color: #999;margin-top: 8px;">3个喜欢,5个评论</a>
						</div>
					</div>
					<div style="display: flex;flex-direction: row;padding: 20px;background: white;margin-top: 10px;">
						<div>
							<a href="javascript:;"><img src="./img/tx3.jpg" style="width: 30px;height: 30px;border-radius: 50%;" /></a>
						</div>
						<div style="margin-left: 10px;">
							<h1 style="font-size: 18px;color: #333;"><a href="javascript:;">宁儿的旅行</a></h1>
							<p style="font-size: 5px;margin: 3px 0;"><a href="javascript:;" style="color: #999;">2023-5-01</a></p>
							<h1 style="font-size: 18px;color: #333;"><a href="javascript:;">去了还想去的地方 | 云上牧场</a></h1>
							<p style="font-size: 15px;color: #666;margin: 5px 0;"><a href="javascript:;"  class="rela" >#伏羲山</a>
							<a href="javascript:;"  class="rela">#宝藏景区</a></p>
							<div>
								<img src="./img/fxs1.jpg" style="width: 100px;height: 100px;"/>
								<img src="./img/fxs2.jpg" style="width: 100px;height: 100px;"/>							
							</div>
							<a href="javascript:;" style="font-size: 13px;color: #999;margin-top: 8px;">6个喜欢,2个评论</a>
						</div>
					</div>
					<div style="display: flex;flex-direction: row;padding: 20px;background: white;margin-top: 10px;">
						<div>
							<a href="javascript:;"><img src="./img/tx4.jpg" style="width: 30px;height: 30px;border-radius: 50%;" /></a>
						</div>
						<div style="margin-left: 10px;">
							<h1 style="font-size: 18px;color: #333;"><a href="javascript:;">不做妖精多年</a></h1>
							<p style="font-size: 5px;margin: 3px 0;"><a href="javascript:;" style="color: #999;">2023-4-20</a></p>
							<h1 style="font-size: 18px;color: #333;"><a href="javascript:;">旅途的意义 | 五一旅行</a></h1>
							<p style="font-size: 15px;color: #666;margin: 5px 0;"><a href="javascript:;"  class="rela" >#旅行</a>
							<a href="javascript:;"  class="rela">#节日快乐</a></p>
							<div>
								<img src="./img/lx1.jpg" style="width: 100px;height: 100px;"/>
								<img src="./img/lx2.jpg" style="width: 100px;height: 100px;"/>
								<img src="./img/lx3.jpg" style="width: 100px;height: 100px;"/>
								<img src="./img/lx4.jpg" style="width: 100px;height: 100px;"/>
							
							</div>
							<a href="javascript:;" style="font-size: 13px;color: #999;margin-top: 8px;">2个喜欢,9个评论</a>
						</div>
					</div>
					<div style="display: flex;flex-direction: row;padding: 20px;background: white;margin-top: 10px;">
						<div>
							<a href="javascript:;"><img src="./img/tx.jpg" style="width: 30px;height: 30px;border-radius: 50%;" /></a>
						</div>
						<div style="margin-left: 10px;">
							<h1 style="font-size: 18px;color: #333;"><a href="javascript:;">小瑞爱奋斗</a></h1>
							<p style="font-size: 5px;margin: 3px 0;"><a href="javascript:;" style="color: #999;">2023-4-29</a></p>
							<h1 style="font-size: 18px;color: #333;"><a href="javascript:;">嵩山 | 发现旅游色彩</a></h1>
							<p style="font-size: 15px;color: #666;margin: 5px 0;"><a href="javascript:;"  class="rela" >#嵩山</a>
							<a href="javascript:;"  class="rela">#中岳嵩山</a></p>
							<div>
								<img src="./img/ss1.jpg" style="width: 100px;height: 100px;"/>
								<img src="./img/ss2.jpg" style="width: 100px;height: 100px;"/>
								<img src="./img/ss3.jpg" style="width: 100px;height: 100px;"/>
								<img src="./img/ss4.jpg" style="width: 100px;height: 100px;"/>
								<img src="./img/ss5.jpg" style="width: 100px;height: 100px;"/>							
							</div>
							<a href="javascript:;" style="font-size: 13px;color: #999;margin-top: 8px;">8个喜欢,7个评论</a>
						</div>
					</div>
				</div>
			</div>
			<div class="sqgc-two">
				<div style="background-color: white;padding: 20px;">
					<div style="font-size: 13px;color: #999;line-height: 20px;">
						<p>话题广场体现豆锁社区的话题趋势。话题是有主题的内容聚合，是豆友们的沙龙，你可以在此,
					发现同一主题下的精彩内容，更欢迎你写新日记、添加已有日记、发话题广播来参与讨论。</p>
					<p>话题广场即将开放发起话题、邀请参与等功能。</p></div>
					<p style="margin: 20px 0;"><a href="javascript:;" style="color:#6a9bc2;font-size:13px;">>分类查看话题</a></p>
					<p><a href="javascript:;" style="color:#6a9bc2;font-size:13px">>我的话题</a></p>
				</div>
				<div style="background-color: white;padding: 20px;margin-top: 10px;">
					<h2 style="font-size: 17px;color: #70bb83;">24小时话题趋势......</h2>
					<div>
						<p style="margin: 10px 0;">
							<a href="javascript:;" style="color:#6a9bc2;font-size: 15px;">1.五一旅行教我做人
						<span style="color: #999;font-size: 12px;margin-left: 5px;">681.1万次浏览</span></a>
						</p>
						<p style="margin: 10px 0;">
							<a href="javascript:;" style="color:#6a9bc2;font-size: 15px;">2.我的私藏小众旅行路线
						<span style="color: #999;font-size: 12px;margin-left: 5px;">161.9万次浏览</span></a>
						</p>
						<p style="margin: 10px 0;">
							<a href="javascript:;" style="color:#6a9bc2;font-size: 15px;">3.你为什么不快乐
						<span style="color: #999;font-size: 12px;margin-left: 5px;">43.7万次浏览</span></a>
						</p>
						<p style="margin: 10px 0;">
							<a href="javascript:;" style="color:#6a9bc2;font-size: 15px;">4.你每天都有哪些突如其来的感悟?
						<span style="color: #999;font-size: 12px;margin-left: 5px;">1.8亿次浏览</span></a>
						</p>
						<p style="margin: 10px 0;">
							<a href="javascript:;" style="color:#6a9bc2;font-size: 15px;">5.用一句话记录今天
						<span style="color: #999;font-size: 12px;margin-left: 5px;">7425.0万次浏览</span></a>
						</p>
						<p style="margin: 10px 0;">
							<a href="javascript:;" style="color:#6a9bc2;font-size: 15px;">6.那些热爱生活的人
						<span style="color: #999;font-size: 12px;margin-left: 5px;">6.0万次浏览</span></a>
						</p>
						<p style="margin: 10px 0;">
							<a href="javascript:;" style="color:#6a9bc2;font-size: 15px;">7.情绪记录日记
						<span style="color: #999;font-size: 12px;margin-left: 5px;">5755.6万次浏览</span></a>
						</p>
						<p style="margin: 10px 0;">
							<a href="javascript:;" style="color:#6a9bc2;font-size: 15px;">8.热爱生活的一万个理由
						<span style="color: #999;font-size: 12px;margin-left: 5px;">1.3亿次浏览</span></a>
						</p>
						<p style="margin: 10px 0;">
							<a href="javascript:;" style="color:#6a9bc2;font-size: 15px;">9.我的长假一人宅
						<span style="color: #999;font-size: 12px;margin-left: 5px;">5.6万次浏览</span></a>
						</p>
						<p style="margin: 10px 0;">
							<a href="javascript:;" style="color:#6a9bc2;font-size: 15px;">10.五一抢票失败者PlanB 
						<span style="color: #999;font-size: 12px;margin-left: 5px;">5.5万次浏览</span></a>
						</p>		
					</div>
				</div>
			</div>
		</div>
		
		
		
		
		<!-- 公共底部 -->
		<div class="xtx_footer clearfix">
		  <div class="wrapper">
		    <!-- 联系我们 -->
		    <div class="contact clearfix">
		      <dl>
		        <dt>客户服务</dt>
		        <dd class="chat">在线客服</dd>
		        <dd class="feedback">问题反馈</dd>
		      </dl>
		      <dl>
		        <dt>关注我们</dt>
		        <dd class="weixin">公众号</dd>
		        <dd class="weibo">微博</dd>
		      </dl>
		      <dl>
		        <dt>下载APP</dt>
		        <dd class="qrcode">
		          <img src="./img/qrcode.jpg">
		        </dd>
		        <dd class="download">
		          <span>扫描二维码</span>
		          <span>立马下载APP</span>
		          <a href="javascript:;">下载页面</a>
		        </dd>
		      </dl>
		      <dl>
		        <dt>服务热线</dt>
		        <dd class="hotline">
		          400-0000-000
		          <small>周一至周日 8:00-18:00</small>
		        </dd>
		      </dl>
		    </div>
		  </div>
		  <!-- 其它 -->
		  <div class="extra">
		    <div class="wrapper">
		      <!-- 口号 -->
		      <div class="slogan">
		        <a href="javascript:;" class="price">价格亲民</a>
		        <a href="javascript:;" class="express">物流快捷</a>
		        <a href="javascript:;" class="quality">品质新鲜</a>
		      </div>
		      <!-- 版权信息 -->
		      <div class="copyright">
		        <p>
		          <a href="javascript:;">关于我们</a>
		          <a href="javascript:;">帮助中心</a>
		          <a href="javascript:;">售后服务</a>
		          <a href="javascript:;">配送与验收</a>
		          <a href="javascript:;">商务合作</a>
		          <a href="javascript:;">搜索推荐</a>
		          <a href="javascript:;">友情链接</a>
		        </p>
		        <p>CopyRight &copy; 旅游网</p>
		      </div>
		    </div>
		  </div>
		</div>
		<script src="./tools/swiper.min.js"></script>

	</body>
</html>

	</head>
	<body>
	</body>
</html>
